import {Component, OnInit, TemplateRef} from '@angular/core';
import {PopupService} from '@shared/popup/popup.service';

@Component({
  template: `
    <nz-divider nzText="普通上传" nzOrientation="left"></nz-divider>
    <app-upload-file [(ngModel)]="imgs" [config]="config"></app-upload-file>
    返回：{{imgs}}
    <nz-divider nzText="oss上传" nzOrientation="left"></nz-divider>
    <app-oss-upload-file [(ngModel)]="ossImgs"></app-oss-upload-file>
    返回：{{ossImgs}}
    <nz-divider nzText="下载" nzOrientation="left"></nz-divider>
    <button nz-button
            nzType="primary"
            download-file
            [http-url]="download.http.url"
            [http-data]="download.http.data"
            [file-name]="download.fileName"
            (success)="downloadSuccess($event)"
            (error)="downloadError($event)"
    >下载
    </button>

    <nz-divider nzText="抽屉" nzOrientation="left"></nz-divider>
    <button nz-button (click)="open(upload, 720)">Open</button>
    <ng-template #upload>
      <app-oss-upload-file [(ngModel)]="ossImgs"></app-oss-upload-file>
    </ng-template>
    <ng-template #ueditor>
      <app-ueditor [(ngModel)]="data" (ready)="onReady($event)"></app-ueditor>
    </ng-template>
    <nz-divider nzText="文本编辑器" nzOrientation="left"></nz-divider>
    <div>
      <app-ueditor [(ngModel)]="data" (ready)="onReady($event)"></app-ueditor>
    </div>
    <nz-divider nzText="echarts可视化数据" nzOrientation="left"></nz-divider>
    <app-charts [options]="options">
      <div style="text-align: center;">charts效果图</div>
    </app-charts>
  `
})
export class DemoComponent implements OnInit {

  imgs: string[];

  ossImgs: string[];

  data: string;

  config = {
    nzMultiple: true
  };

  options = {
    title: {
      text: '南丁格尔玫瑰图',
      subtext: '纯属虚构',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      x: 'center',
      y: 'bottom',
      data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
    },
    toolbox: {
      show: true,
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        magicType: {
          show: true,
          type: ['pie', 'funnel']
        },
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    calculable: true,
    series: [
      {
        name: '半径模式',
        type: 'pie',
        radius: [20, 110],
        center: ['25%', '50%'],
        roseType: 'radius',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: true
          }
        },
        lableLine: {
          normal: {
            show: false
          },
          emphasis: {
            show: true
          }
        },
        data: [
          {value: 10, name: 'rose1'},
          {value: 5, name: 'rose2'},
          {value: 15, name: 'rose3'},
          {value: 25, name: 'rose4'},
          {value: 20, name: 'rose5'},
          {value: 35, name: 'rose6'},
          {value: 30, name: 'rose7'},
          {value: 40, name: 'rose8'}
        ]
      },
      {
        name: '面积模式',
        type: 'pie',
        radius: [30, 110],
        center: ['75%', '50%'],
        roseType: 'area',
        data: [
          {value: 10, name: 'rose1'},
          {value: 5, name: 'rose2'},
          {value: 15, name: 'rose3'},
          {value: 25, name: 'rose4'},
          {value: 20, name: 'rose5'},
          {value: 35, name: 'rose6'},
          {value: 30, name: 'rose7'},
          {value: 40, name: 'rose8'}
        ]
      }
    ]
  };

  download = {
    http: {
      url: '/get/web/download/demomodule/DemoService/exportDemo',
      data: {
        name: 'demo'
      }
    },
    fileName: 'demo.xlsx'
  };

  constructor(
    private popupService: PopupService
  ) {
  }

  ngOnInit(): void {
  }

  onReady(ue: any): void {
    console.log(ue);
  }

  downloadSuccess(event: any) {
    console.log(event);
  }

  downloadError(event: any) {
    console.log(event);
  }

  open(template: TemplateRef<{}>, width: number = 1200): void {
    this.popupService.create({
      title: 'demo',
      content: template,
      width: 720,
      onSubmit: (res) => {
      },
      onCancel: (res) => {
      }
    });
  }
}
